<!--
 * @Date         : 2023-11-22 17:12:29
 * @Description  : 垂直电影卡片
-->

<template>
  <view class="film-card-vertical" @click="onClickFilm">
    <view class="relative">
      <view v-for="(vitem, vindex) in versions" :key="vindex" class="film-version" :style="[versionStyle(vindex)]">{{ vitem }}</view>
      <view v-if="form == 'pre'" class="film-score">{{ film.wantView | formatNumberWithUnit }}想看</view>
      <view v-else-if="film.preSaleFlag == 1" class="film-score">{{ film.wantView | formatNumberWithUnit }}想看</view>
      <view v-else-if="film.preSaleFlag == 0" class="film-score">{{ film.score === "暂无评分" || film.score == 0 ? "暂无评分" : `${film.score}分` }}</view>
      <u-image :src="film.cover" width="204rpx" height="286rpx" radius="12rpx"></u-image>
    </view>
    <view class="font-26 font-bold text-row-1 mt-16">{{ film.filmName }}</view>
    <!-- 上映时间 -->
    <view v-if="form == 'pre'" class="font-20 mt-2 text-999">{{ film.publishDate | formatWeekDesc }}上映</view>
    <zm-button v-if="film.preSaleFlag == 0" custom-class="mt-10" size="small" width="104rpx" height="54rpx" text-size="26rpx" round :custom-style="themeButtonStyle" @click.stop="onClickBuy">
      购票
    </zm-button>
    <zm-button
      v-else-if="film.preSaleFlag == 1"
      custom-class="mt-10"
      type="success"
      size="small"
      width="104rpx"
      height="54rpx"
      text-size="26rpx"
      round
      custom-style="box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(21, 195, 102,0.16);"
      @click.stop="onClickBuy"
    >
      预售
    </zm-button>
    <zm-button
      v-else-if="film.preSaleFlag == 2 && film.isCollect == 1"
      custom-class="mt-10"
      type="default"
      size="small"
      width="104rpx"
      height="54rpx"
      text-size="26rpx"
      text-color="#999999"
      border-color="#cccccc"
      plain
      round
      @click.stop="onClickCollect"
    >
      已想看
    </zm-button>
    <zm-button
      v-else-if="film.preSaleFlag == 2"
      custom-class="mt-10"
      type="warning"
      size="small"
      width="104rpx"
      height="54rpx"
      text-size="26rpx"
      round
      custom-style="box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(255, 165, 26,0.16);"
      @click.stop="onClickCollect"
    >
      想看
    </zm-button>
    <!-- 颜色分析 -->
    <!-- #ifdef MP-WEIXIN -->
    <!-- <zm-color-analysis :url="film.cover" :max-colors="1" :match-colors="filmCoverColors" @finish="handleOnColorAnalysisFinish"></zm-color-analysis> -->
    <!-- #endif -->
  </view>
</template>

<script>
import hook from "@/mixins/hook"
import weixin from "@/mixins/weixin"
import { mapGetters } from "vuex"
export default {
  name: "film-card-vertical",
  mixins: [hook, weixin],
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    form: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      film: {},
      matchColor: "#288E9B"
    }
  },
  computed: {
    ...mapGetters(["filmCoverColors"]),
    themeButtonStyle() {
      const style = {}
      const { r, g, b } = uni.$hexToRgb(this.themeColor)
      style["box-shadow"] = `0rpx 3rpx 6rpx 1rpx rgba(${r}, ${g}, ${b},0.16)`
      return style
    },
    versions() {
      return this.film.versions?.filter((version) => !["2D", "3D"].includes(version)) || []
    },
    versionStyle() {
      return (index) => {
        const style = {}
        style.top = 8 + index * 36 + "rpx"
        return style
      }
    }
  },
  watch: {
    data: {
      handler(val) {
        this.film = val
      },
      deep: true,
      immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    onClickFilm() {
      this.toView({
        url: "pages/cinema/film-info/film-info",
        params: {
          color: this.matchColor,
          filmId: this.film.filmId,
          filmCode: this.film.filmCode
        }
      })
    },
    onClickBuy() {
      this.toView({
        url: "pages/cinema/cinema-list-film/cinema-list-film",
        params: {
          filmCode: this.data.filmCode,
          filmName: this.data.filmName,
          filmId: this.data.filmId,
          publishDate: this.data.publishDate
        }
      })
    },
    // 点击想看
    onClickCollect() {
      uni.$debounce(async () => {
        const res = await uni.$api.film.filmCollection({ filmId: this.film.filmId })
        if (res.collectionType == 1) {
          this.film.isCollect = 1
          uni.$toast("已同步至我的想看页面")
        } else {
          this.film.isCollect = 0
        }
      }, 300)
    },
    // 颜色分析结果
    handleOnColorAnalysisFinish(colors) {
      if (colors?.length) {
        this.matchColor = colors[0]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.film-card-vertical {
  width: 204rpx;
  display: flex;
  margin-right: 16rpx;
  flex-direction: column;
  .film-version {
    top: 8rpx;
    left: 8rpx;
    z-index: 1;
    height: 28rpx;
    padding: 4rpx;
    display: flex;
    font-size: 20rpx;
    color: #ffffff;
    font-weight: bold;
    position: absolute;
    border-radius: 4rpx;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
  }
  .film-score {
    left: 0;
    bottom: 0;
    width: 204rpx;
    height: 67rpx;
    z-index: 1;
    display: flex;
    color: #ffffff;
    padding: 0 12rpx;
    position: absolute;
    align-items: center;
    border-radius: 0rpx 0rpx 12rpx 12rpx;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
  }
}
</style>
